import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'flex-end'},
  buttonContainer: {
    top: '80%',
    flexDirection: 'row',
    flexWrap: 'wrap', // Allow wrapping to new lines
    justifyContent: 'space-around', // Space buttons evenly
    paddingBottom: 300,
  },
  button: {
    width: '50%', // Button width takes up almost half of the container's width
    height: 100,
    marginVertical: 20, // Space between rows
    alignItems: 'center', // Center content horizontally
    justifyContent: 'center', // Center content vertically
  },
  buttoninsider: {
    width: 60, // Button width takes up almost half of the container's width
    height: 80,
    backgroundColor: 'white',
    alignItems: 'center', // Center content horizontally
    justifyContent: 'center', // Center content vertically
  },
  buttonContent: {
    position: 'relative', // Position relative to the button
    alignItems: 'center',
    justifyContent: 'center',
    borderBlockColor: 'black',
    borderWidth: 3,
    width: '100%',
    height: '100%',
  },
  image: {
    width: 50,
    height: 50,
    position: 'absolute', // Ensure the image stays in place
  },
  text: {
    fontSize: 25,
    fontWeight: 'bold',
    position: 'absolute',
    textAlign: 'center',
    color: 'black', // Ensure the text is visible against the image
  },
  wordStyle: {
    borderWidth: 3,
    backgroundColor: 'white',
    position: 'absolute',
    right: 70,
    bottom: 40,
    borderBlockColor: 'black',
    borderBlock: 10,
  },
  wordis: {
    fontWeight: 'bold',
    color: 'black',
    fontSize: 30,
    width: '100%',
    margin: 50,
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.75)', // 半透明背景
  },
});
export default styles;
